<template>
  <div class="front-page">
    <!-- 导航栏 -->
    <nav class="nav-header glass-effect">
      <div class="nav-content">
        <router-link to="/" class="logo">
          <Logo :size="36"/>
          <h2>高校志愿服务<span class="gradient-text">平台</span></h2>
        </router-link>

        <div class="nav-menu">
          <router-link to="/activities" class="nav-item">
            <el-icon>
              <Calendar/>
            </el-icon>
            活动中心
          </router-link>
          <router-link to="/showcase" class="nav-item">
            <el-icon>
              <Picture/>
            </el-icon>
            活动风采
          </router-link>
          <router-link to="/about" class="nav-item">
            <el-icon>
              <InfoFilled/>
            </el-icon>
            关于我们
          </router-link>
        </div>

        <div class="nav-actions">
          <template v-if="userStore.token">
            <el-dropdown trigger="click" @command="handleCommand">
              <div class="user-profile glass-effect">
                <img :src="userStore.avatar || 'https://picsum.photos/100/100?random=1'"
                     alt="用户头像"
                     class="user-avatar"/>
                <span class="username">{{ userStore.name || '用户' }}</span>
                <el-icon>
                  <ArrowDown/>
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="custom-dropdown">

                  <el-dropdown-item v-if="userStore.role === 'volunteer' || userStore.role === 3 || userStore.role === '3'" @click="goToProfile">
                    <el-icon><User /></el-icon> 个人中心
                  </el-dropdown-item>

                  <el-dropdown-item @click="goToAdmin" v-else>
                    <el-icon>
                      <Setting/>
                    </el-icon>
                    管理后台
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">
                    <el-icon>
                      <SwitchButton/>
                    </el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
          <template v-else>
            <el-button type="primary" @click="goToLogin" class="login-btn hover-float">
              <span>登录 / 注册</span>
              <el-icon>
                <Right/>
              </el-icon>
            </el-button>
          </template>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <section v-if="isProfilePage">
        <h2>个人中心</h2>
        <el-form :model="userInfo" label-width="80px" style="max-width: 400px;">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.name" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateProfile">保存修改</el-button>
          </el-form-item>
        </el-form>
        <el-divider>已报名活动</el-divider>
        <el-table :data="registeredActivities" style="width: 100%">
          <el-table-column prop="title" label="活动名称" />
          <el-table-column prop="status" label="状态" />
          <el-table-column prop="registerTime" label="报名时间" />
        </el-table>
      </section>
      <section v-else>
        <!-- 欢迎横幅 -->
        <section class="hero-section">
          <div class="hero-background">
  <!--          <el-carousel :interval="5000" arrow="never" :autoplay="true" indicator-position="none">-->
  <!--            <el-carousel-item v-for="i in 4" :key="i">-->
  <!--              <div class="hero-slide" :style="{-->
  <!--                backgroundImage: `url(https://picsum.photos/1920/1080?random=${i})`-->
  <!--              }"></div>-->
  <!--            </el-carousel-item>-->
  <!--          </el-carousel>-->
            <div class="hero-overlay"></div>
          </div>

          <div class="hero-content">
            <h1 class="hero-title">
              高校志愿服务
              <div class="title-decoration"></div>
            </h1>
            <p class="hero-slogan">加入我们，共同传递温暖</p>
            <p class="hero-description">让青春在志愿服务中闪光，让世界因你我而更美好</p>

            <div class="hero-actions">
              <el-button type="primary" class="action-btn primary-btn" @click="goToActivity">
                <el-icon>
                  <Calendar/>
                </el-icon>
                浏览活动
              </el-button>
              <el-button class="action-btn secondary-btn" @click="goToAdmin">
                <el-icon>
                  <Setting/>
                </el-icon>
                管理中心
              </el-button>
            </div>
          </div>

          <div class="decoration-circle circle-1"></div>
          <div class="decoration-circle circle-2"></div>
          <div class="decoration-dots dots-1"></div>
          <div class="decoration-dots dots-2"></div>
        </section>


        <!-- 热门活动 -->
        <section class="featured-section">
          <div class="section-header">
            <div class="section-title-container">
              <h2 class="section-title">
                热门活动
                <div class="title-underline"></div>
              </h2>
              <p class="section-subtitle">发现更多有意义的志愿服务机会</p>
            </div>
          </div>

          <div class="featured-carousel-container">
            <el-carousel
                :interval="5000"
                type="card"
                height="400px"
                :autoplay="true"
                @change="handleCarouselChange"
                indicator-position="outside"
                class="enhanced-carousel">
              <el-carousel-item v-for="activity in hotActivities" :key="activity.id">
                <div class="activity-card card-3d-effect" @click="goToActivityDetail(activity.id)">
                  <div class="activity-cover">
                    <img :src="activity.coverUrl || defaultCover" :alt="activity.title"/>
                    <div class="activity-status" :class="getStatusClass(activity.status)">
                      {{ getStatusText(activity.status) }}
                    </div>
                    <div class="activity-info-overlay">
                      <div class="overlay-content">
                        <div class="activity-type-tag">志愿服务</div>
                        <h3 class="overlay-title">{{ activity.title }}</h3>
                      </div>
                    </div>
                  </div>
                  <div class="activity-content">
                    <h3 class="activity-title">{{ activity.title }}</h3>
                    <p class="activity-desc">{{ activity.description }}</p>
                    <div class="activity-details">
                      <div class="meta-row">
                        <div class="meta-item">
                          <el-icon><Calendar /></el-icon>
                          <span>{{ formatDate(activity.startTime) }}</span>
                        </div>
                        <div class="meta-item">
                          <el-icon><Location /></el-icon>
                          <span>{{ activity.location }}</span>
                        </div>
                      </div>
                      <div class="meta-row">
                        <div class="activity-progress">
                          <div class="progress-header">
                            <span class="progress-label">报名进度</span>
                            <span class="progress-text">{{ activity.registeredNumber }}/{{ activity.recruitNumber }}</span>
                          </div>
                          <el-progress
                              :percentage="Math.min(Math.round(activity.registeredNumber / activity.recruitNumber * 100), 100)"
                              :stroke-width="6"
                              :color="getProgressColor(activity.registeredNumber, activity.recruitNumber)">
                          </el-progress>
                        </div>
                      </div>
                      <div class="activity-actions">
                        <el-button type="primary" size="small" class="join-btn" @click.stop="handleRegister(activity)">
                          报名
                        </el-button>
                        <el-button :type="activity.isCollected ? 'danger' : 'default'" size="small" class="collect-btn" @click.stop="handleCollection(activity)">
                          {{ activity.isCollected ? '已收藏' : '收藏' }}
                        </el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </section>

        <!-- 活动风采 -->
        <section class="showcase-section">
          <div class="section-header">
            <div class="section-title-container">
              <h2 class="section-title">
                活动风采
                <div class="title-underline"></div>
              </h2>
              <p class="section-subtitle">记录志愿者们的精彩瞬间</p>
            </div>
          </div>

          <div class="showcase-grid">
            <div v-for="showcase in showcaseList"
                 :key="showcase.id"
                 class="showcase-card card-3d-effect"
                 @click="goToEvaluation(showcase.activityId)">
              <div class="showcase-image-container">
                <img :src="showcase.imageUrl || defaultCover" :alt="showcase.title" class="showcase-image"/>
                <div class="showcase-overlay">
                  <div class="overlay-content">
                    <h3 class="showcase-title">{{ showcase.title }}</h3>
                    <p class="showcase-date">
                      <el-icon><Calendar /></el-icon>
                      {{ formatDate(showcase.createTime) }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="showcase-footer">
                <div class="showcase-org">{{ showcase.description || '志愿团队' }}</div>

              </div>
            </div>
          </div>
        </section>
      </section>
    </main>

    <!-- 平台统计 -->
    <section class="stats-section">
      <PlatformStats/>
    </section>


    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-grid">
          <div class="footer-section">
            <Logo :size="40"/>
            <h3>高校志愿服务平台</h3>
            <p>为高校志愿者提供便捷的活动管理和报名平台</p>
          </div>
          <div class="footer-section">
            <h3>快速链接</h3>
            <ul class="footer-links">
              <li><a @click="goToActivity">活动中心</a></li>
              <li><a @click="goToAdmin">管理后台</a></li>
              <li v-if="!userStore.token"><a @click="goToLogin">登录/注册</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>联系我们</h3>
            <p>
              <el-icon>
                <Message/>
              </el-icon>
              volunteer@university.edu
            </p>
            <p>
              <el-icon>
                <Phone/>
              </el-icon>
              123-456-7890
            </p>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© {{ new Date().getFullYear() }} 高校志愿服务平台 版权所有</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useUserStore} from '@/stores/user'
import {ElMessage, ElMessageBox} from 'element-plus'
import {
  Calendar,
  Location,
  User,
  Star,
  View,
  ChatDotRound,
  Clock,
  ArrowDown,
  ArrowRight,
  Right,
  Setting,
  SwitchButton,
  Key,
  Message,
  Phone
} from '@element-plus/icons-vue'
import {formatDateTime} from '@/utils/format'
import axios from 'axios'
import PlatformStats from '@/components/PlatformStats.vue'
import Logo from "@/components/Logo.vue";
import {getUserRegisteredActivities} from "@/api/user";

const router = useRouter()
const userStore = useUserStore()
const route = useRoute()

// 默认封面图
const defaultCover = 'https://picsum.photos/800/400?random=1'

// 轮播图数据
const carousels = ref([])
// 热门活动数据
const hotActivities = ref([])
// 加载状态
const loading = ref(false)

// 活动风采数据
const showcaseList = ref([])

// 统计数据
const statistics = ref({
  totalActivities: 120,
  totalVolunteers: 2358,
  totalHours: 8976,
  totalCredits: 3690
})

const handleCommand = async (command) => {
  if (command === 'logout') {
    try {
      await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      try {
        await userStore.logout()
        console.log('登出成功，正在跳转到登录页...')
      } catch (error) {
        console.error('登出过程中发生错误，但仍会跳转到登录页', error)
      }

      // 无论登出API是否成功，都清除本地状态并跳转到登录页
      localStorage.removeItem('user-store')
      userStore.token = ''
      userStore.userInfo = {}

      // 使用replace而不是push，防止用户可以回退到需要登录的页面
      router.replace('/login')
    } catch (error) {
      // 用户取消操作，不做处理
      console.log('用户取消了登出操作')
    }
  } else if (command === 'profile') {
    // 志愿者个人中心
    profileDialogVisible.value = true
    // 获取已报名活动
    const res = await getUserRegisteredActivities(userStore.id)
    if (res.code === 200) {
      registeredActivities.value = res.data
    }
  } else if (command === 'admin') {
    // 管理后台跳转
    router.replace('/admin/dashboard')
  }
}


// 轮播图当前索引
const currentCarouselIndex = ref(0)

// 监听轮播图变化
const handleCarouselChange = (index) => {
  currentCarouselIndex.value = index
}

// 设置活动轮播图
const setActiveCarousel = (index) => {
  currentCarouselIndex.value = index
  // 这里可以添加控制轮播图切换的逻辑，但Element Plus的轮播组件没有直接的方法
  // 实际项目中可以使用ref和调用方法来实现
}

// 获取进度条颜色
const getProgressColor = (current, total) => {
  const percentage = (current / total) * 100
  if (percentage < 40) return '#67c23a'
  if (percentage < 80) return '#e6a23c'
  return '#f56c6c'
}

// 获取首页数据
const getHomeData = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/home/data')
    if (response.data.code === 200) {
      carousels.value = response.data.data.carousels
      hotActivities.value = response.data.data.hotActivities
      showcaseList.value = response.data.data.showcases
    } else {
      ElMessage.error(response.data.message || '获取数据失败')
    }
  } catch (error) {
    console.error('获取首页数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 跳转到活动详情
const goToActivityDetail = (activityId) => {
  try {
    if (!activityId) {
      ElMessage.warning('活动ID不能为空')
      return
    }

    // 检查是否登录
    if (!userStore.isLoggedIn) {
      ElMessage.warning('请先登录后再查看活动详情')
      router.push({
        name: 'Login',
        query: {redirect: `/activity/${activityId}`}
      })
      return
    }

    router.push({
      name: 'FrontActivityDetail',
      params: {id: activityId}
    })
  } catch (error) {
    console.error('跳转失败:', error)
    ElMessage.error('跳转失败，请稍后重试')
  }
}

// 页面加载时获取数据
onMounted(() => {
  getHomeData()
})

// 获取活动状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '未开始',
    1: '报名中',
    2: '进行中',
    3: '已结束',
    4: '已取消'
  }
  return statusMap[status] || '未知状态'
}

// 获取活动状态样式
const getStatusClass = (status) => {
  const statusMap = {
    0: 'status-pending',    // 未开始
    1: 'status-active',     // 报名中
    2: 'status-ongoing',    // 进行中
    3: 'status-completed',  // 已结束
    4: 'status-canceled'    // 已取消
  }
  return statusMap[status] || 'status-pending'
}

// 判断是否可以报名
const canRegister = (activity) => {
  const now = new Date()
  const registerStart = new Date(activity.registerStartTime)
  const registerEnd = new Date(activity.registerEndTime)
  return now >= registerStart && now <= registerEnd &&
      activity.status === 1 &&
      activity.registeredNumber < activity.recruitNumber
}

// 获取报名按钮文本
const getRegisterButtonText = (activity) => {
  if (activity.status === 0) return '未开始'
  if (activity.status === 2) return '进行中'
  if (activity.status === 3) return '已结束'
  if (activity.status === 4) return '已取消'
  if (activity.registeredNumber >= activity.recruitNumber) return '已满员'
  return '立即报名'
}

// 跳转到活动评价
const goToEvaluation = (activityId) => {
  // 如果用户已登录，可以直接跳转到后台的评价页面
  if (userStore.token) {
    router.push(`/admin/evaluation?activityId=${activityId}`)
  } else {
    // 未登录用户，提示需要登录
    ElMessageBox.confirm('查看活动评价需要登录，是否前往登录？', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      goToLogin()
    }).catch(() => {
    })
  }
}

// 处理活动报名
const handleRegister = async (activity) => {
  if (!userStore.token) {
    ElMessageBox.confirm('您需要登录后才能报名活动', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      router.push('/login')
    }).catch(() => {
    })
    return
  }

  // 跳转到活动详情页面进行报名
  goToActivityDetail(activity.id)
}

// 处理活动收藏
const handleCollection = async (activity) => {
  if (!userStore.token) {
    ElMessageBox.confirm('您需要登录后才能收藏活动', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      router.push('/login')
    }).catch(() => {
    })
    return
  }

  try {
    // 直接修改本地状态，不调用API
    if (activity.isCollected) {
      activity.isCollected = false
      ElMessage.success('取消收藏成功')
    } else {
      activity.isCollected = true
      ElMessage.success('收藏成功')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  }
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未设置'
  return formatDateTime(dateString, 'YYYY-MM-DD')
}

// 导航到登录页
const goToLogin = () => {
  router.push('/login')
}

// 导航到管理后台
const goToAdmin = () => {
  router.push('/admin/dashboard')
}

// 导航到活动页面
const goToActivity = () => {
  if (userStore.token) {
    router.push('/admin/activity')
  } else {
    ElMessageBox.confirm('需要登录后才能查看更多活动', '提示', {
      confirmButtonText: '去登录',
      cancelButtonText: '取消',
      type: 'info'
    }).then(() => {
      goToLogin()
    }).catch(() => {
    })
  }
}

// 处理退出登录
const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage({
      message: '已成功退出登录',
      type: 'success',
      duration: 2000
    })
    router.push('/login')
  } catch (error) {
    console.error('登出失败:', error)
    ElMessage.error('登出失败，请重试')
  }
}

const goToProfile = () => {
  router.push('/profile')
}

const isProfilePage = computed(() => route.path === '/profile')
const userInfo = ref({
  name: userStore.name,
  email: userStore.email,
  phone: userStore.phone
})
const updateProfile = async () => {
  // 调用后端API保存
  // await updateUserProfile(userInfo.value)
  ElMessage.success('保存成功')
}
</script>

<style scoped>
/* 全局样式 */
.front-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f9fc 0%, #f1f4f9 100%);
  color: #2c3e50;
  font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 导航栏样式 */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 70px;
  transition: all 0.3s ease;
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-item:hover {
  color: #4173ff;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* 主要内容区域 */
.main-content {
  padding-top: 70px;
}

/* Hero部分 */
.hero-section {
  position: relative;
  height: calc(100vh - 70px);
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-slide {
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 6s ease;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(65, 115, 255, 0.9), rgba(94, 98, 255, 0.9));
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 0 2rem;
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 2rem;
  line-height: 1.2;
  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}

.title-decoration {
  width: 100px;
  height: 4px;
  background: white;
  margin: 1rem auto;
  border-radius: 2px;
}

.hero-slogan {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  opacity: 0;
  animation: fadeInUp 1s ease-out 0.3s forwards;
}

.hero-description {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInUp 1s ease-out 0.6s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  opacity: 0;
  animation: fadeInUp 1s ease-out 0.9s forwards;
}

/* 统计部分 */
.stats-section {
  padding: 4rem 2rem;
  background: white;
}

/* 活动部分 */
.featured-section {
  padding: 4rem 0;
  background: linear-gradient(135deg, #f4f8ff 0%, #f0f4fc 100%);
  position: relative;
  overflow: hidden;
}

.featured-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(65, 115, 255, 0.05), transparent 70%);
  top: -150px;
  left: -150px;
  border-radius: 50%;
  z-index: 1;
}

.section-header {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 2;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(120deg, #3a66db, #5e62ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}

.title-underline {
  width: 50px;
  height: 3px;
  background: linear-gradient(to right, #3a66db, #5e62ff);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1rem;
  color: #6b7280;
  margin-top: 0.75rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.featured-carousel-container {
  position: relative;
  z-index: 2;
  padding: 1rem 0;
  max-width: 1200px;
  margin: 0 auto;
}

.enhanced-carousel {
  --card-scale: 0.85;
}

:deep(.el-carousel__container) {
  padding: 1.5rem 0;
}

:deep(.el-carousel__item--card) {
  transform: scale(var(--card-scale)) translateY(5px);
  filter: brightness(0.9) saturate(0.9);
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

:deep(.el-carousel__item--card.is-active) {
  transform: scale(0.95) translateY(0);
  filter: brightness(1) saturate(1);
  z-index: 10;
}

.activity-card {
  height: 100%;
  max-width: 450px;
  margin: 0 auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background-color: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid rgba(240, 240, 250, 0.8);
  will-change: transform, box-shadow;
}

.activity-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

.activity-cover {
  height: 200px;
  position: relative;
  overflow: hidden;
}

.activity-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.activity-card:hover .activity-cover img {
  transform: scale(1.05);
}

.activity-status {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.status-active {
  background-color: #10b981;
  color: white;
}

.status-pending {
  background-color: #9ca3af;
  color: white;
}

.status-ongoing {
  background-color: #f59e0b;
  color: white;
}

.status-completed {
  background-color: #3b82f6;
  color: white;
}

.status-canceled {
  background-color: #ef4444;
  color: white;
}

.activity-info-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  color: white;
}

.activity-card:hover .activity-info-overlay {
  opacity: 1;
}

.activity-type-tag {
  display: inline-block;
  background-color: #3a66db;
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.overlay-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.activity-content {
  padding: 1.2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.activity-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.7rem;
  color: #1f2937;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-desc {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 1.2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.activity-details {
  margin-top: auto;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #6b7280;
}

.meta-item .el-icon {
  margin-right: 0.4rem;
  font-size: 0.9rem;
  color: #3a66db;
}

.activity-progress {
  margin-bottom: 1rem;
  width: 100%;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.progress-label {
  font-weight: 500;
}

.progress-text {
  color: #3a66db;
  font-weight: 600;
}

:deep(.el-progress-bar__inner) {
  transition: all 0.3s ease;
}

.activity-actions {
  display: flex;
  gap: 0.75rem;
}

.join-btn, .collect-btn {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.4rem 0.6rem;
  height: auto;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.join-btn {
  background-color: #3a66db;
  border-color: #3a66db;
}

.join-btn:hover {
  background-color: #2c4fb3;
  border-color: #2c4fb3;
  transform: translateY(-2px);
}

.collect-btn {
  background-color: #f3f4f6;
  border-color: #f3f4f6;
  color: #6b7280;
}

.collect-btn:hover {
  background-color: #e5e7eb;
  border-color: #e5e7eb;
  transform: translateY(-2px);
}

.collect-btn.el-button--danger {
  background-color: #fee2e2;
  border-color: #fee2e2;
  color: #ef4444;
}

.collect-btn.el-button--danger:hover {
  background-color: #fecaca;
  border-color: #fecaca;
}

/* 风采展示部分 */
.showcase-section {
  padding: 5rem 0;
  background: white;
  position: relative;
  overflow: hidden;
}

.showcase-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(65, 115, 255, 0.03), transparent 70%);
  top: -200px;
  right: -200px;
  border-radius: 50%;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.showcase-card {
  height: 100%;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  background-color: white;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  border: 1px solid rgba(240, 240, 250, 0.8);
}

.showcase-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
}

.showcase-image-container {
  height: 220px;
  position: relative;
  overflow: hidden;
}

.showcase-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0, 0.2, 1);
}

.showcase-card:hover .showcase-image {
  transform: scale(1.08);
}

.showcase-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.showcase-card:hover .showcase-overlay {
  opacity: 1;
}

.showcase-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.showcase-date {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.showcase-date .el-icon {
  margin-right: 0.4rem;
}

.showcase-footer {
  padding: 1.2rem;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.showcase-org {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.showcase-stats {
  display: flex;
  justify-content: space-between;
}

.showcase-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.showcase-stats .stat-item .el-icon {
  font-size: 0.9rem;
  color: #3a66db;
}

/* 页脚样式 */
.footer {
  background: linear-gradient(135deg, #2c3e50, #3d556e);
  color: white;
  padding: 4rem 2rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-bottom {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-title {
    font-size: 3rem;
  }

  .hero-slogan {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-slogan {
    font-size: 1.2rem;
  }

  .section-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .action-btn {
    width: 100%;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 装饰元素 */
.decoration-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
}

.circle-2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  right: -100px;
}

.decoration-dots {
  position: absolute;
  opacity: 0.1;
}

.dots-1 {
  top: 20%;
  left: 10%;
  width: 200px;
  height: 200px;
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 20px 20px;
}

.dots-2 {
  bottom: 20%;
  right: 10%;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(circle, white 1px, transparent 1px);
  background-size: 15px 15px;
}
</style>
